<template style = "  height: 100%;">
  <div class="body">
    <user-head></user-head>
    <div class="context">
      <div class="detail">
        <el-carousel trigger="click" height="150px" class="carousel">
          <el-carousel-item v-for="(item,index) in detail.resources" :key="index">
            <el-image :src="path + 'image/' + item.path" fit="fit"></el-image>
          </el-carousel-item>
        </el-carousel>
        <div style="display:inline-block;vertical-align: top; ">
          <p>{{detail.bookName}}</p>
          <p>{{detail.author}}</p>
          <p>{{detail.price}}</p>
          <p>{{detail.pressName}}</p>
          <el-button style="color:red;" @click="enterCart">加入购物车</el-button>
        </div>
      </div>
      <div>
        <div>
          <el-image
            v-for="(item,index) in detail.detailResources"
            style="width:100%"
            :key="index"
            :src="path + 'image/' + item.path"
            fit="fit"
          ></el-image>
        </div>
        <div>
          <div v-for="(item,index) in detail.details" :key="index">
            <p>{{item.title}}</p>
            <p>{{item.content}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import GLOBAL from "../../Global.vue";
import Head from "./Head.vue";
export default {
  components: {
    "user-head": Head,
  },
  data() {
    return {
      path: GLOBAL.BASE_URL,
      detail: {},
    };
  },
  methods: {
    enterCart() {
      var user = JSON.parse(localStorage.user);
      if (user === undefined || user === null) {
        const { href } = this.$router.resolve({
          name: "登录",
          query: {},
        });
        window.open(href, "_blank");
      } else {
        //添加到购物车
        this.COMMON.httpPost(
          this,
          "shoppingCartOperation/insert",
          { userId: user.id, bookId: this.$route.query.id },
          (result) => {
            if (result.result === "SUCCESS") {
              this.$message({
                message: "添加成功",
                type: "success",
              });
            }
          },
          (result) => {}
        );
      }
    },
    getBook() {
      var id = this.$route.query.id;
      this.COMMON.httpPost(
        this,
        "bookOperation/selectOne",
        { id: id },
        (result) => {
          if (result.result === "SUCCESS") {
            this.detail = result.data;
          }
        },
        (result) => {}
      );
    },
  },
  created: function () {
    this.getBook();
  },
};
</script>

<style>
.body {
  width: 100%;
  height: 100%;
  overflow: auto;
  margin: 0px;
  padding: 0;
}

.context {
  margin-inline: 300px;
  margin-top: 30px;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
}
.detail {
  width: 100%;
}
.carousel {
  width: 200px;
  display: inline-block;
  margin: 10px;
}
</style>